<template>
  <el-container class="index">
    <el-header>
      <el-row :gutter="20">
        <el-col :span="8">
          <div>
            <el-input placeholder="请输入内容" suffix-icon="el-icon-search" v-model="input1"></el-input>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="navBtn">
            <el-button type="text" icon="el-icon-s-home">首页</el-button>
            <el-button type="text" icon="el-icon-video-camera-solid">视频</el-button>
            <el-button type="text" icon="el-icon-picture">照片</el-button>
            <el-button type="text" icon="el-icon-s-comment">留言</el-button>
            <el-button type="text">登录</el-button>
          </div>
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
        >
          <el-menu-item index="1">
            <i class="el-icon-menu"></i>
            <span slot="title">网站介绍</span>
          </el-menu-item>
          <el-menu-item index="2">
            <i class="el-icon-document"></i>
            <span slot="title">有趣事</span>
          </el-menu-item>
          <el-menu-item index="3">
            <i class="el-icon-setting"></i>
            <span slot="title">留言板</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="16">
            <login-content></login-content>
          </el-col>
          <el-col :span="8">
            <login-form></login-form>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
    <el-footer>wanghan@hangzhou</el-footer>
  </el-container>
</template>

<script>
import LoginContent from './loginContent.vue';
import LoginForm from './loginForm.vue';

export default {
  components: {
    LoginContent,
    LoginForm,
  }
};
</script>

<style module>
.index{
  min-width: 700px;
  max-width: 1200px;
  margin: 0 auto;
}
.el-header {
  line-height: 60px;
  font-size: 16px;
  color: #000;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.navBtn {
  float: right;
}
.el-button--text {
  color: #696e78;
  font-size: 14px;
}
.el-meun {
  border: none;
}
.el-footer {
  text-align: center;
  font-size: 10px;
  color: #f2f2f2;
}
</style>
